<template>
	<div class="bookdetail">
		<div class="div1">
			<header>
				<router-link to="/mobile/home"><</router-link>
				<span>书籍详情</span>
			</header>
		</div>
		<div class="div2">
			<h3>{{book.name}}</h3>
			<aside>
				<h4>月销量:{{book.salenum}}</h4>
				<ul>
					<li class="li1">
						<button @click="add(book.id)">
							<i class="el-icon-shopping-cart-2"></i>
							<p>购物车</p>
						</button>
					</li>
					<li>
						<button @click="add(book.id)">
							<i class="el-icon-star-off"></i>
							<p>收藏</p>
						</button>
					</li>
				</ul>
			</aside>
		</div>
		<div class="div3">
			<table border="0" cellspacing="" cellpadding="">
				<tr>
					<td>书本编号:{{book.sn}}</td>
				</tr>
				<tr>
					<td>作者:{{book.author}}</td>
				</tr>
				<tr>
					<td>出版社:{{book.maker}}</td>
				</tr>
				<tr>
					<td>出版时间:{{book.tmake}}</td>
				</tr>
			</table>
		</div>
		<div class="div5">
			<aside>
				<details>
					<summary>书籍简介</summary>
						<p>
							 &nbsp;&nbsp;&nbsp;{{book.info}}
						</p>
				</details>
			</aside>
		</div>
		<div class="div4">
			<aside>
				<img :src="`${$ip}/api/public/showimg/${book.pic}`"/>
			</aside>
			<button @click="purchase(book.id)">立即购买</button>
		</div>
		<div class="div6">
			<aside class="aside2" v-for="item in comments">
				<div class="aside2-user">
					<aside class="img1">
						<img :src="`${$ip}/api/public/showimg/${item.img}`"/>
					</aside>
				</div>
				<div class="aside2-rate">
					<div class="rate-as">
						<span>{{item.nickname}}</span>
						<aside class="img2">
							<img v-show="type==0" src="../../assets/img/login/good.png"/>
						</aside>
					</div>
					<p>{{item.content}}</p>
				</div>
			</aside>
			<div class="k">
				一一 - 一一
			</div>
			<aside class="aside1">
				<aside class="img">
					<img :src="`${$ip}/api/public/showimg/${$store.state.img}`"/>
				</aside>
				<form @submit.prevent="send()">
					<input type="text" v-model="comment.content" placeholder="... 发表评论"/>
					<input type="submit" value="发送" />
				</form>
			</aside>
		</div>
	</div>
</template>

<script>
export default {
	name:'MobileBookDetail',
	data(){
		return {
			list:[],
			find:[],
			book:{},
			comment:{
				content:'',
				rate:5,
			},
			page:{
				num:1,
				lines:15
			},
			total:0,
			comments:[],
			type:0
		}
	},
	methods:{
		// 添加到购物车
		add(id){
			this.$get("/api/public/addCart/"+id).then((resp)=>{
				this.$router.push({path:'/mobile/myshopping'});
				
				this.$message({
			          message: resp.data.msg,
			          type: 'success'
				});
			})
		},
		// 立即购买
		purchase(id){
			this.add(id);
		},
		// 添加评论
		send(){
			if(this.comment.content!=''){
				this.$postkv("/api/public/rate/add/"+this.$route.params.bookid,this.comment).then((resp)=>{
					this.findRate();
				})
				//添加完后清空输入框
				this.comment.content='';
			}
		},
		//根据当前书籍的id查找当前书籍的评论
		findRate(){
			this.$get("/api/public/rate/findByBookid/"+this.$route.params.bookid + "/" + this.page.num + "/" +this.page.lines).then((resp)=>{
				this.comments =resp.data.data.comments;
				this.total =resp.data.data.total
				console.log(this.comments);
			})
		},
	},
	mounted(){
		this.findRate();
		this.$get("/api/public/book/findById/"+this.$route.params.bookid).then((resp)=>{
			this.book =resp.data.data;
			console.log(this.book);
		})
	}
}
</script>

<style scoped>
.bookdetail{
	background-color: #DABA9E;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.bookdetail .div1{
	width: 100%;
	line-height: 2.5rem;
	font-size: 1rem;
	border-bottom: 2px solid #E5E4F0;
}
.bookdetail .div1 header a{
	color: white;
	font-size: 1.5rem;
	margin-left: 1rem;
}
.bookdetail .div1 header span{
	color: white;
	margin-left: 8rem;
}
.bookdetail .div2{
	width: 96%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-left: 0.8rem;
}
.bookdetail .div2 h3{
	color: white;
}
.bookdetail .div2 aside h4{
	color: #bd1133;
	margin-top: 0.8rem;
	font-size: 1.1rem;
	margin-left: 0.6rem;
}
.bookdetail .div2 aside ul{
	display: flex;
}
.bookdetail .div2 aside ul .li1{
	margin-right: 0.5rem;
	display: flex;
}
.bookdetail .div2 aside ul li{
	color: white;
	margin: 0.625rem auto;
}
.bookdetail .div2 aside ul li i{
	font-size: 2rem;
	color: white;
}
.bookdetail .div2 aside ul li button{
	font-size: 16px;
	color: white;
	border: none;
	background-color: #DABA9E;
}
.bookdetail .div3 table{
	width: 96%;
	color: white;
	margin-left: 0.8rem;
}
.bookdetail .div3 table tr{
	line-height: 1.5rem;
}
.bookdetail .div4{
	width: 100%;
	height: 16rem;
	margin-top: 1rem;
	text-align: center;
}
.bookdetail .div4 aside{
	width: 100%;
	height: 80%;
}
.bookdetail .div4 aside img{
	width: 40%;
	height: 100%;
}
.bookdetail .div4 button{
	color: white;
	background-color: #DABA9E;
	border: none;
	margin-top: 0.5rem;
	font-size: 1rem;
}
.bookdetail .div5{
	width: 100%;
}
.bookdetail .div5 aside{
	width: 98%;
	line-height: 1.5rem;
	color: white;
	margin-left: 0.8rem;
}
.bookdetail .div6{
	width: 100%;
}
.bookdetail .div6 .aside1{
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 auto;
	background-color: #ebeaf5;
	position: fixed;
	bottom: 10px;
}
.bookdetail .div6 .aside1 .img{
	width: 60px;
	height: 60px;
	margin-left: 0.25rem;
}
.bookdetail .div6 .aside1 .img img{
	width: 98%;
	height: 98%;
	border-radius: 20%;
}
.bookdetail .div6 .aside1 input[type="text"]{
	width: 17rem;
	border: none;
	line-height: 2.4rem;
	border-radius: 0.4rem;
	margin-left: 0.5rem;
	text-indent: 1em;
}
.bookdetail .div6 .aside1 input[type="submit"]{
	width: 3rem;
	line-height: 2.4rem;
	border: none;
	border-radius: 0.5rem;
	margin-left: 0.6rem;
	background-color: white;
}
.bookdetail .div6 .aside2{
	width: 96%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	margin: 8px;
	margin-top: 2rem;
	border-top: 1px solid #c4c7cb;
}
.bookdetail .div6 .aside2 .aside2-user{
	width: 16%;
}
.bookdetail .div6 .aside2 .aside2-user .img1{
	width: 3.5rem;
	height: 3.5rem;
}
.bookdetail .div6 .aside2 .aside2-user .img1 img{
	width: 98%;
	height: 98%;
	border-radius: 50%;
	margin-top: 0.5rem;
}
.bookdetail .div6 .aside2 .aside2-user .img2{
	width: 1rem;
	line-height: 0.1rem;
}
.bookdetail .div6 .aside2 .aside2-user .img2 img{
	width: 100%;
	height: 52%;
	border-radius: 50%;
	margin-top: 0.3rem;
	margin-left: 18rem;
}
.bookdetail .div6 .aside2 .aside2-rate{
	width: 84%;
	margin: 0 auto;
}
.bookdetail .div6 .aside2 .aside2-rate .rate-as{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bookdetail .div6 .aside2 .aside2-rate .rate-as .img2{
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.5rem;
}
.bookdetail .div6 .aside2 .aside2-rate .rate-as .img2 img{
	width: 100%;
	height: 100%;

}
.bookdetail .div6 .aside2 .aside2-rate span{
	display: flex;
	width: 50%;
	margin-top: 0.5rem;
}
.bookdetail .div6 .aside2 .aside2-rate p{
	width: 90%;
	font-size: 15px;
	margin-top: 0.5rem;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.bookdetail .div6 .k{
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	font-size: 18px; 
	color: #E5E4F0;
	text-align: center;
	margin-bottom: 3.5rem;
}
</style>
